<template>
  <div>
    <!--工具条-->
    <el-form ref="elForm" size="medium" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="流程编号" label-width="100px">
            <el-input
              placeholder="流程编号"
              size="small"
              v-model="queryparam.fprocinsno"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="视图类型" label-width="100px">
            <el-select
              size="small"
              v-model="queryparam.viewState"
              placeholder="请选择视图类型"
            >
              <el-option
                v-for="item in ViewState"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程名称" label-width="100px">
            <el-input
              placeholder="流程名称"
              size="small"
              v-model="queryparam.procBID"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程主题" label-width="100px">
            <el-input
              placeholder="流程主题"
              size="small"
              v-model="queryparam.fprocinsname"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="发起人" label-width="100px">
            <selector
              :typemode="1"
              :ismulti="true"
              :checklisted="queryparam.startUser"
              @confirm="startUserconfirm"
            ></selector>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人" label-width="100px">
            <selector
              :typemode="1"
              :ismulti="true"
              :checklisted="queryparam.fapplicantuser"
              @confirm="applicantuserconfirm"
            ></selector>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程状态" label-width="100px">
            <el-select
              size="small"
              v-model="queryparam.procInsState"
              placeholder="请选择流程状态"
            >
              <el-option
                v-for="(item, index) in ProcInsState"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前待办人" label-width="100px">
            <selector
              :typemode="1"
              :ismulti="true"
              :checklisted="queryparam.approvingUser"
              @confirm="approvingUserconfirm"
            ></selector>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前节点" label-width="100px">
            <el-input
              placeholder="当前流程节点"
              size="small"
              v-model="queryparam.actName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发起时间" label-width="100px">
            <el-date-picker
              v-model="queryparam.fstarttime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button
            type="primary"
            size="small"
            @click="$refs.gridlist.loadData(1)"
            style="margin-left: 10px;"
            icon="el-icon-search"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <pagetable
          ref="gridlist"
          :queryparam="queryparam"
          :apiajaxfun="apiajaxfun"
          :tablecol="tablecol"
          :colSlots="scopedSlots"
        >
          <template slot="fstatus" slot-scope="record">{{
            ProcInsState[record.row.fstatus]
          }}</template>
          <template slot="fprocinsname" slot-scope="record">
            <el-button
              type="text"
              @click="viewPorceeFrom(record.row)"
              size="small"
              >{{ record.row.fprocinsname }}</el-button
            >
          </template>
        </pagetable>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { ApiQueryporcessinsList } from '@/api/tappPorcessins.js'
import pagetable from '@/components/pagetable/index.vue'
export default {
  props: ['fromtype'],
  components: { pagetable },
  data() {
    return {
      queryparam: {
        fprocinsno: '',
        ViewState: '',
        procBID: '',
        fprocinsname: '',
        fstarttime: [],
        startUser: {},
        fapplicantuser: {},
        procInsState: '',
        approvingUser: {},
        actName: ''
      },
      ProcInsState: [
        '全部',
        '草稿',
        '处理中',
        '',
        '已完成',
        '废弃',
        '撤销',
        '待系统处理',
        '审批失败',
        '审批异常',
        '流程异常'
      ],
      ViewState: [
        { name: '所有视图', value: '1' },
        { name: '我的草稿', value: '2' },
        { name: '我的发起', value: '3' },
        { name: '待办待阅', value: '4' },
        { name: '已办已阅', value: '5' }
      ],
      scopedSlots: ['fprocinsname', 'fstatus'],
      questionName: '',
      apiajaxfun: ApiQueryporcessinsList,
      tablecol: [
        {
          title: '流程主题',
          dataIndex: 'fprocinsname',
          width: 150,
          scopedSlots: { customRender: 'fprocinsname' },
          align: 'center'
        },
        {
          title: '流程编码',
          dataIndex: 'fprocinsno',
          width: 150,
          scopedSlots: { customRender: 'fprocinsno' },
          align: 'center'
        },
        {
          title: '申请人',
          dataIndex: 'fapplicantusername',
          width: 150,
          scopedSlots: { customRender: 'fapplicantusername' },
          align: 'center'
        },
        {
          title: '发起人',
          dataIndex: 'fstartername',
          width: 150,
          scopedSlots: { customRender: 'fstartername' },
          align: 'center'
        },
        {
          title: '发起时间',
          dataIndex: 'fstarttime',
          width: 150,
          scopedSlots: { customRender: 'fstarttime' },
          align: 'center'
        },
        {
          title: '结束时间',
          dataIndex: 'fcompletetime',
          width: 150,
          scopedSlots: { customRender: 'fcompletetime' },
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'fstatus',
          width: 150,
          scopedSlots: { customRender: 'fstatus' },
          align: 'center'
        },
        {
          title: '当前节点',
          dataIndex: 'fcurrentactname',
          width: 150,
          scopedSlots: { customRender: 'fcurrentactname' },
          align: 'center'
        },
        {
          title: '当前处理人',
          dataIndex: 'fcurrentapproversuser',
          width: 150,
          scopedSlots: { customRender: 'fcurrentapproversuser' },
          align: 'center'
        }
      ]
    }
  },
  created() {},
  methods: {
    viewPorceeFrom(rows) {
      const urlobj = this.$router.resolve({
        path: '/ProcessFrom',
        query: {
          processid: rows.fprocessid,
          processinsid: rows.fid,
          actinsid: rows.vactinsid,
          viewmodel: rows.viewmodel
        }
      })
      window.open(urlobj.href)
    },
    startUserconfirm(userlist) {
      if (userlist.length > 0) {
        this.queryparam.startUser = userlist[0]
      } else {
        this.queryparam.startUser = {}
      }
    },
    approvingUserconfirm(userlist) {
      if (userlist.length > 0) {
        this.queryparam.approvingUser = userlist[0]
      } else {
        this.queryparam.approvingUser = {}
      }
    },
    applicantuserconfirm(userlist) {
      if (userlist.length > 0) {
        this.queryparam.fapplicantuser = userlist[0]
      } else {
        this.queryparam.fapplicantuser = {}
      }
    }
  }
}
</script>
